<template>
      <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6/build/g6";
export default{
    data(){
        return{
            gData:{
                // 点集
                nodes: [{
                    id: 'node1', // 节点的唯一标识
                    x: 100,      // 节点横坐标
                    y: 200,      // 节点纵坐标
                    label: '起始点' // 节点文本
                    },{
                    id: 'node2',
                    x: 300,
                    y: 200,
                    label: '目标点'
                }],
                // 边集
                edges: [
                    // 表示一条从 node1 节点连接到 node2 节点的边
                    {
                        source: 'node1',  // 起始点 id
                        target: 'node2',  // 目标点 id
                        label: '我是连线'   // 边的文本
                    }
                ]
            }
        }
    },
    created(){
        
    },
    mounted(){
         this.$nextTick(() => {
            this.init();
            });
    },
    methods:{
        init(){
            //图实例化时，至少需要为图设置容器、宽、高：
            const graph = new G6.Graph({
                container: 'mountNode', // 指定挂载容器
                width: 800,             // 图的宽度
                height: 500,            // 图的高度

                defaultNode: {
                    // ... 其他属性
                    style: {
                        fill: '#steelblue',
                        stroke: '#eaff8f',
                        lineWidth: 5,
                    // ... 其他属性
                    }
                }
            });
            //数据的加载和图的渲染是两个步骤，可以分开进行。
             graph.data(this.gData);  // 加载数据
            graph.render();        // 渲染
        }
    }
}
</script>
